<template>
  <div class="table_con">
    <tableComponents
      :isHavePagination="false"
      :isShow="false"
      :isHaveExport="false"
      :isShowBottom="false"
      @toAdd="AddMenuLi"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="data"
          v-loading="loading"
          stripe
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.8%"
        >
          <el-table-column
            label="排序"
            sortable
            :sort-method="sorta"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              <div>
                <el-input
                  @change="sortNew(scope.$index, scope.row)"
                  v-model.number="scope.row.sort"
                  autocomplete="off"
                  size="small"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="分类图片" align="center" min-width="100">
            <template slot-scope="scope">
              <div class="img_bor">
                <img :src="$fnc.getImgUrl(scope.row.piclink)" alt />
              </div>
            </template>
          </el-table-column>

          <el-table-column label="分类名称" min-width="200">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>

          <el-table-column label="分类描述" min-width="120">
            <template slot-scope="scope">{{ scope.row.description }}</template>
          </el-table-column>

          <el-table-column prop="name" label="是否显示" min-width="125">
            <template slot-scope="scope">
              <el-switch
                class="zdySwith"
                :width="82"
                v-model="scope.row.show"
                active-color="#1aad19"
                inactive-color="#ffffff"
                active-text="ON"
                inactive-text="OFF"
                active-value="1"
                @change="gethandSwitch($event, scope.row)"
                inactive-value="0"
              ></el-switch>
              <!-- <switchc style="font-size:13px;position: relative;top: 22%;" v-model="scope.row.is_top" @change="getTop($event,scope.row)" text="已置顶|未置顶"></switchc> -->
            </template>
          </el-table-column>

          <el-table-column
            prop="address"
            label="创建时间"
            min-width="170"
            show-overflow-tooltip
          >
            <template slot-scope="scope">{{
              scope.row.created_time | getTimeFormat
            }}</template>
          </el-table-column>

          <el-table-column label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                type="primary"
                size="mini"
                @click="updateMenuLi(scope.row)"
                >编辑</el-button
              >
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="danger"
                @click="deleteMenu(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog
      :close-on-click-modal="false"
      title="新闻分类"
      class="tl size_13"
      width="800px"
      @close="closeDio"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
        <el-form-item label="分类标题" prop="title">
          <el-col :span="12">
            <el-input
              v-model="form.title"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="图片地址" prop="piclink">
          <el-col :span="12" class="tl">
            <el-input
              v-model="form.piclink"
              disabled
              autocomplete="off"
            ></el-input>
            <uploadpic
              :piclink="form.piclink"
              :width="150"
              :height="150"
              :real_width="50"
              :real_height="50"
              :is_more="false"
              @send_pic="onSuccess"
            ></uploadpic>
          </el-col>
        </el-form-item>
        <el-form-item label="分类描述" prop>
          <el-col :span="12">
            <el-input
              v-model="form.description"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-col>
        </el-form-item>

        <!-- <el-form-item label="前端显示类型" prop>
                  <el-col :span="12">
                    <el-radio v-model="form.vue_type" label="0">普通</el-radio>
                    <el-radio v-model="form.vue_type" label="1">快讯</el-radio>
                  </el-col>
        </el-form-item>-->

        <el-form-item
          label="是否开启采集"
          prop
          v-if="is_cj.sjcj && is_cj.sjcj.is_open != 0"
        >
          <el-col :span="12">
            <el-radio v-model="form.is_collection" label="0">关闭</el-radio>
            <el-radio v-model="form.is_collection" label="1">开启</el-radio>
          </el-col>
        </el-form-item>

        <el-form-item
          label="选择采集网站"
          prop="status"
          v-if="is_cj.sjcj && is_cj.sjcj.is_open != 0"
        >
          <el-col :span="12">
            <el-select
              v-model="form.collection_iden"
              placeholder="请选择"
              @change="handChange"
              style="width: 100%"
            >
              <el-option
                v-for="item in option2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button
            :loading="$store.state.isLoading"
            type="primary"
            @click="addMenu('form')"
            >立即提交</el-button
          >
          <el-button
            :loading="$store.state.isLoading"
            @click="resetForm('form')"
            >重 置</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import tableTree from "../currency/tableThree";
import menuForm from "@/components/currency/menuMessageBox.vue";
import HeadTitle from "@/components/currency/HeadTitle.vue";
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
import uploadpic from "@/components/page/pic/up_pic";
export default {
  data() {
    return {
      is_cj: {},
      data: [],
      xy_down: 0,
      xy_down_text: "全部隐藏",
      hackReset: true,
      add: "",
      op: [],
      option: [],
      option2: [],
      optionProps: {
        value: "id",
        label: "title",
        children: "z",
      },
      dialogFormVisible: false,
      form: {
        title: "",
        parent_id: "0",
        piclink: "",
        is_collection: "0",
        collection_iden: "",
        vue_type: "0",
      },
      rules: {
        title: [
          { required: true, message: "请输入商品类别名称", trigger: "blur" },
        ],
      },
      updateUrl: "",
      showImg: false,
      fileList: [],
      placeText: "请选择栏目添加",
      loading: false,
    };
  },
  watch: {
    getMenuList(obj) {
      //   this.data = obj;
    },
  },
  computed: {},
  created() {
    //   this.data=this.$store.state.menuList;
    this.is_cj = JSON.parse(localStorage.getItem("limit"));

    this.getNewFenLeiTree();
  },
  methods: {
    sorta(a, b) {
      return b - a;
    },
    sortNew(index, row) {
      var params = {};
      params.id = row.id;
      params.sort = row.sort;
      this.$api.getNewsFenlei.sortInpitNewsFenLei(params).then((res) => {
        if (res.data.code == 200) {
          this.getNewFenLeiTree();
        }
      });
    },
    closeDio() {
      this.dialogFormVisible = false;
      this.form = {
        title: "",
        parent_id: "0",
        piclink: "",
        description: "",
        is_collection: "0",
        vue_type: "0",
      };
      this.updateUrl = "";
      this.showImg = false;
      this.op = [];
    },
    getNewFenLeiTree() {
      this.loading = true;
      var params = {};
      params.parent_id = "0";
      this.$api.getNewsFenlei.getNewsList(params).then((res) => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.data = res.data.result;
          this.option = res.data.result;
        }
        this.loading = false;
      });
    },
    getoptionCollect() {
      var params = {};
      this.$api.getNewsFenlei.getNewsCollect(params).then((res) => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.option2 = res.data.result;
        }
      });
    },

    handChange(val) {
      this.form.collection_iden = val;
    },

    addMenu(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          var params = {};
          params = this.form;
          if (
            params.piclink == null ||
            params.piclink.lastIndexOf("png") +
              params.piclink.lastIndexOf("jpg") <=
              0
          ) {
            params.piclink =
              "resource/image/default/201902/4dbbe0d13acad6ac132f4f45544503fd.png";
          }
          if (params.id) {
            this.$api.getNewsFenlei.updateNewsFenLei(params).then((res) => {
              if (
                res.data.code == 200 &&
                res.data.status == 1 &&
                res.data.result
              ) {
                this.$fnc.alertSuccess({ text: "修改成功" }); //成功弹出框
                this.getNewFenLeiTree();
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          } else {
            this.$api.getNewsFenlei.addNewsFenLei(params).then((res) => {
              if (
                res.data.code == 200 &&
                res.data.status == 1 &&
                res.data.result
              ) {
                this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
                this.getNewFenLeiTree();
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    handleItemChange(val) {
      this.form.parent_id = val[val.length - 1];
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    deleteMenu(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var data = { id };
          this.$api.getNewsFenlei.delNewsFenLei(data).then((res) => {
            if (res.status == 200 && res.data.code == 400) {
              this.$fnc.alertError(res.data.code_desc, res.data.result);
            } else if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getNewFenLeiTree();
              //刷新页面。。。
            } else {
              this.$swal("删除失败！", "出错啦！", "success");
            }
          });
        }
      });
    },

    AddMenuLi() {
      this.getoptionCollect();
      this.dialogFormVisible = true;
    },
    updateMenuLi(row) {
      this.getoptionCollect();
      this.op = [];
      this.dialogFormVisible = true;
      this.form = {
        id: row.id,
        title: row.title,
        parent_id: row.parent_id,
        piclink: row.piclink,
        description: row.description,
        is_collection: row.is_collection,
        collection_iden: row.collection_iden,
        vue_type: row.vue_type,
      };
      this.showImg = true;
      this.updateUrl = this.$fnc.getImgUrl(row.piclink);
      if (row._parent == undefined) {
        this.op.push(row.id);
      } else if (row._parent._parent == undefined) {
        this.op.push(row._parent.parent_id);
        this.op.push(row._parent.id);
      } else {
        this.op.push(row._parent.parent_id);
        this.op.push(row._parent.id);
      }
    },
    getSortData(da) {
      this.$api.getNewsFenlei.sortNewsFenLei(da).then((res) => {
        this.getNewFenLeiTree();
      });
    },
    onSuccess(pic) {
      this.form.piclink = pic;
      this.showImg = true;
      this.updateUrl = this.$fnc.getImgUrl(pic);
    },
    gethandSwitch(show, row) {
      var params = {};
      params = row;
      params.show = show;
      this.$api.getNewsFenlei.updateNewsFenLei(params).then((res) => {
        if (!res.data.result) {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
  },
  components: {
    tableTree,
    HeadTitle,
    compressimgUpload,
    uploadpic,
  },
};
</script>
